<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core" 
  xmlns:p="http://primefaces.org/ui" 
  xmlns:h="http://java.sun.com/jsf/html" 
  xmlns:pr="http://java.sun.com/jsf/composite/totororo"
  template="template_front.xhtml">
  <ui:define name="content">  
	<h:panelGroup id="produits" styleClass="home">
	<p:outputPanel>
	<h1><h:outputText value="Recherche #{homeController.recherche}" rendered="#{homeController.recherche != null}"/></h1>
	 <p:dataGrid id="availableProducts" value="#{homeController.books}" var="book" columns="4"  paginator="true" rows="8">  
           <p:column>  	    
				<h:panelGroup id="product" styleClass="produit">
			     	<h:form>
				  	<div class="image">	    
						<h:commandLink action="#{homeController.bookDetails}">				    
							<pr:photo type="book" elementId="#{book.id}" size="small"/>
						 	<f:param name="bookId" value="#{book.id}" />
						</h:commandLink>
					</div>
					<div class="title">			
						<h:commandLink action="#{homeController.bookDetails}"> 	
			  				<h:outputText value="#{book.title}"/>
						 	<f:param name="bookId" value="#{book.id}" />				 	
						</h:commandLink>
					</div>
					<div class="price">		
			     		<h:outputText value="#{book.price} €"/>
			     	</div>
			     	<div class="add-cart">
			     		<h:commandLink action="#{cartController.addToCart}">
			     			<img src="#{facesContext.externalContext.requestContextPath}/resources/images/add-cart.png" />
			     			<f:param name="bookId" value="#{book.id}" />
			     		</h:commandLink>
			     	</div>
			     	</h:form>
		    	</h:panelGroup>
			<p:draggable for="product" helper="clone" />  
          </p:column>  
      </p:dataGrid>
	  <div class="clearer"></div>
	  </p:outputPanel>
  	</h:panelGroup>
  </ui:define>
</ui:composition>
